<template>
  <div class="main">
        <p class="main_text">拖车结算</p>
      <!-- 搜索 -->
      <div class="g-search">
        <!-- 信息区域 -->
        <div class="all_select" style="flex-wrap: wrap">
          <div class="input_valye">
            <span class="demonstration">付款时间:</span>
            <el-date-picker v-model="searchValue.statisticMonth" type="month" placeholder="开始时间" />
          </div>
          <div class="input_valye">
            <span class="demonstration">拖车公司:</span>
            <el-input v-model="searchValue.companyName" style="width: 200px" />
          </div>
          <!-- 店铺名称 -->
          <div class="input_valye">
            <span class="demonstration">是否付款:</span>
            <el-select v-model="searchValue.payStatus" style="width: 200px">
              <el-option label="否" value="false" />
              <el-option label="是" value="true" />
            </el-select>
          </div>
          <div class="input_valye">
            <span class="demonstration">发票状态:</span>
            <el-select v-model="searchValue.invoiceStatus" style="width: 200px">
              <el-option label="未收到" value="0" />
              <el-option label="已收到" value="1" />
            </el-select>
          </div>

        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
    <!-- ############################################## 数据表格 ############################################## -->
    <div class="cyr-flex">
      <div class="mb20">
<!--        <el-button type="primary" v-if="roleList.write" @click="handleConfirmPay">批量确认付款</el-button>-->
<!--        <el-button type="primary" v-if="roleList.write" @click="handleBatchConfirmInvoice">批量确认发票</el-button>-->
        <el-button v-if="roleList.write" @click="handleExportExcel">导出明细</el-button>
      </div>
      <div class="cyr-flex-box">
      <el-table :data="tableData"  @selection-change="handleSelectionChange"
        :show-overflow-tooltip="true" v-adaptive border >
<!--        <el-table-column type="selection" width="50" :selectable="selectable" />-->
        <el-table-column label="结算时间" prop="statisticMonth"></el-table-column>
        <el-table-column label="拖车公司" prop="companyName"></el-table-column>
        <el-table-column label="托单数量" prop="num"></el-table-column>
        <el-table-column label="拖车扣款" prop="penalty"></el-table-column>
        <el-table-column label="结算合计" prop="price"></el-table-column>
        <el-table-column label="是否付款">
          <template #default="props">
            {{ props.row.payStatus != false ? '是' : '否' }}
          </template>
        </el-table-column>
        <!--                <el-table-column label="付款时间" prop="payTime"></el-table-column>-->
        <el-table-column label="更新时间" prop="updatedAt">
          <template #default="props">
            {{ formatTime(props.row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="付款人" prop="operatorName"></el-table-column>
        <el-table-column label="发票状态">
          <template #default="props">
            {{ props.row.invoiceStatus ? '已收到' : '未收到' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" :show-overflow-tooltip="false">
<!--          <template #default="props">-->
<!--            <el-button size="small" link v-if="roleList.read" @click="handleView(props.row)">查看</el-button>-->
<!--            <el-button size="small" link v-if="roleList.read && !props.row.payStatus"-->
<!--              @click="handleConfirm(props.row)">确认付款</el-button>-->
<!--            <el-button size="small" link v-if="roleList.write && !props.row.invoiceStatus " @click="-->
<!--              handleConfirmInvoice(props.row)">确认发票</el-button>-->
<!--          </template>-->
          <template #default="props">
            <el-button size="small" link v-if="roleList.read" @click="handleView(props.row)">查看</el-button>
            <el-button size="small" link v-if="roleList.read && !props.row.payStatus&&!props.row.invoiceStatus"
                       @click="handleConfirm(props.row)">确认付款</el-button>
            <el-button size="small" link v-if="roleList.write && !props.row.invoiceStatus&&props.row.payStatus" @click="
              handleConfirmInvoice(props.row)">确认发票</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ############################################## 分页 ############################################## -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      @change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <DialogExport :id="viewId" v-model="dialogTableVisible" />
</template>
<script setup lang="ts">
import { ref } from "vue";
import moment from "moment";
import { ElMessage } from "element-plus";
import useAuthorize from "@/hooks/authorize";
import { RequestTrailerSettlement, RequestTrailerConfirm, RequestInvoiceSettleConfirm, RequestExportExcel } from '@/api/path/index'
import { formatTime, formatTimeHan } from '@/utils'
import DialogExport from '@/views/plateform/Finance/components/DialogExport.vue';
import { exportFile } from "@/utils/exportFile.js";
let roleList = useAuthorize();

const currentPage = ref(1);
const pageSize = ref(10);
//查询接口数据类型
interface Search {
  statisticMonth: string;
  page: number;
  rows: number;
  companyName: string;
  payStatus: string;
  invoiceStatus: string;
}
const searchValue = ref<Search>({
  statisticMonth: "",
  page: currentPage.value,
  rows: 10,
  payStatus: '',
  companyName: '',
  invoiceStatus: ''
});
const tableData = ref<any[]>([])
const total = ref(0)
//初始化数据查询
const dataInit = (value) => {
  searchValue.value.rows = pageSize.value
  searchValue.value.page = currentPage.value
  RequestTrailerSettlement(value).then(res => {
    tableData.value = res.resultObj.data
    total.value = res.resultObj.total
  })
}


/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    statisticMonth: "",
    page: 1,
    rows: 10,
    payStatus: '',
    companyName: '',
    invoiceStatus: ''
  };
  dataInit(searchValue.value);
};

/**
 * 搜索点击事件
 */
const search = () => {
  currentPage.value = 1
  dataInit(searchValue.value);
};

const handleExportExcel = () => {
  RequestExportExcel({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出')
    } else {
      exportFile(res, `${formatTimeHan(new Date())}拖车结算`);
    }
  });
}

const selections = ref<any[]>([])
const selectable = (row: any) => {
  return row.invoiceStatus !== 1
}
const flag = ref(false)
//批量确认付款、发票
function confirm(callback: Function) {
  if (flag.value) {
    selections.value = selections.value.filter(item => {
      return item.invoiceStatus === 0
    })
  } else {
    selections.value = selections.value.filter(item => {
      return item.payStatus !== true
    })
  }
  if (selections.value.length === 0) return
  const ids = selections.value.map(item => item.id)
  callback(ids).then((res: any) => {
    if (res.success) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      dataInit(searchValue.value)
    } else {
      ElMessage({
        message: '操作失败',
        type: 'warning',
      })
    }
  })
}
const handleConfirmPay = () => {
  flag.value = false
  confirm(RequestTrailerConfirm)
}
const handleBatchConfirmInvoice = () => {
  flag.value = true
  confirm(RequestInvoiceSettleConfirm)
  // if (selections.value.length == 0) return;
  // const ids = selections.value.map(item => item.id)
  // RequestInvoiceSettleConfirm(ids).then(res => {
  //   if (res.success) {
  //     ElMessage({
  //       message: res.msg,
  //       type: 'success',
  //     })
  //     dataInit(searchValue.value)
  //   } else {
  //     ElMessage({
  //       message: '操作失败',
  //       type: 'warning',
  //     })
  //   }
  // })
}

const handleSelectionChange = (selection: any) => {
  selections.value = selection;
}
const handleCurrentChange = () => {
  dataInit(searchValue.value);
}
const handleConfirm = async (row: any) => {
  const res = await RequestTrailerConfirm([row.id])
  if (res.success) {
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    dataInit(searchValue.value)
  } else {
    ElMessage({
      message: '操作失败',
      type: 'warning',
    })
  }
}
const viewId = ref<number>('')
const dialogTableVisible = ref<boolean>(false)
const handleView = (row: any) => {
  viewId.value = row.id
  dialogTableVisible.value = true
}
const handleConfirmInvoice = async (row: any) => {
  const res = await RequestInvoiceSettleConfirm([row.id])
  if (res.success) {
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    dataInit(searchValue.value)
  } else {
    ElMessage({
      message: '操作失败',
      type: 'warning',
    })
  }
}
dataInit(searchValue.value)
</script>
<style lang="scss" scoped>
@import "@/assets/css/plateform/Article/Content.css";
@import "@/assets/css/plateform/Shop/GoodsManage.css";

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    width: 100%;
    background-color: #fff;
  }

  .input_valye {
    margin: 10px 10px 0 0;
  }
}


.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;

      .right {
        flex: 1;

        .el-steps {
          padding: 0 0 20px 0;
          border-bottom: 1px solid #b9b9b9;
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 50%;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 15px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;

        .box1_other {
          background: #fff;
        }
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }


  .fristbox {
    margin-top: 0px;
  }
}
</style>